<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <!-- Icon Css -->
        <link rel="stylesheet" href="static/css/icon.css">

        <!-- Magnific-popup -->
        <link rel="stylesheet" href="static/css/magnific-popup.css">

        <!-- Animate Css -->
        <link rel="stylesheet" href="static/css/animate.min.css">

        <!-- Owl Carousel -->
        <link rel="stylesheet" type="text/css" href="static/css/owl.carousel.min.css">

        <!-- Style Css -->
        <link rel="stylesheet" href="static/css/style.css">
    </head>
    <body class="antialiased text-lg leading-[30px] font-primary text-dark dark:bg-semidark dark:text-white scrollbar-thumb-dark/25 scrollbar-track-dark/10 scrollbar-thin">
        <!-- Start Preloader-->
        <div id="preloader">
            <div class="loader_line"></div>
        </div>
        <!-- Start Preloader -->

        <!-- Start Navbar -->
        <div class="fixed top-0 w-full z-40">
            <nav class="py-[25px] relative ease-in-out duration-500 mobile-nav max-[768px]:shadow-[0px_0px_10px_rgb(0,0,0,0.1)] max-[768px]:py-[10px] max-[768px]:bg-white max-[768px]:dark:py-[20px] max-[768px]:dark:bg-semidark">
                <div class="container">
                    <div class="flex items-center justify-between md:block">
                        <div class="justify-between items-center flex w-full">
                            <div class="z-50 relative">
                                <a href="javascript:;">
                                    <img src="static/picture/logo.png" class="lg:max-w-[150px] max-w-[90px] dark:hidden" alt="">
                                    <img src="static/picture/dark.png" class="lg:max-w-[150px] max-w-[90px] hidden dark:block" alt="">
                                </a>
                            </div>
                            <div>
                                <button class="block md:hidden outline-none mobile-menu-button">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewbox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
                                    </svg>
                                </button>
                            </div>
                            <div class="hidden md:block">
                                <ul class="list-none flex space-x-2 lg:space-x-[30px] items-center">
                                    <li class="home active"><a href="#home" class="font-medium hover:text-custom font-secondary ease-in-out duration-300 inline-block leading-6 p-2">主页</a></li>
                                    <li class="about"><a href="#about" class="font-medium hover:text-custom font-secondary ease-in-out duration-300 inline-block leading-6 p-2">社团简介</a></li>
                                    <li class="portfolio"><a href="#portfolio" class="font-medium hover:text-custom font-secondary ease-in-out duration-300 inline-block leading-6 p-2">动态</a></li>
                                    <li class="service"><a href="#service" class="font-medium hover:text-custom font-secondary ease-in-out duration-300 inline-block leading-6 p-2">成员</a></li>
                                    <li class="blog"><a href="#blog" class="font-medium hover:text-custom font-secondary ease-in-out duration-300 inline-block leading-6 p-2">博客</a></li>
                                    <li class="contact"><a href="#contact" class="font-medium hover:text-custom font-secondary ease-in-out duration-300 inline-block leading-6 p-2">联系我们</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="hidden mobile-menu md:hidden">
                        <div class="pt-5">
                            <ul>
                                <li class="home active"><a href="#home" class="text-base font-medium hover:text-custom font-secondary ease-in-out duration-300 inline-block leading-6 p-2">主页</a></li>
                                <li class="about"><a href="#about" class="text-base font-medium hover:text-custom font-secondary ease-in-out duration-300 inline-block leading-6 p-2">社团简介</a></li>
                                <li class="portfolio"><a href="#portfolio" class="text-base font-medium hover:text-custom font-secondary ease-in-out duration-300 inline-block leading-6 p-2">动态</a></li>
                                <li class="service"><a href="#service" class="text-base font-medium hover:text-custom font-secondary ease-in-out duration-300 inline-block leading-6 p-2">成员</a></li>
                                <li class="blog"><a href="#blog" class="text-base font-medium hover:text-custom font-secondary ease-in-out duration-300 inline-block leading-6 p-2">博客</a></li>
                                <li class="contact"><a href="#contact" class="text-base font-medium hover:text-custom font-secondary ease-in-out duration-300 inline-block leading-6 p-2">联系我们</a></li>
                                <a href="#" class="btn-outline-custom relative">Download CV</a>
                            </ul>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        <!-- End Navbar -->

        <!-- Start Home -->
        <section class="bg-[url('../img/slider/1.jpg')] flex items-center dark:bg-[url('../img/slider/2.jpg')] bg-center bg-cover lg:h-screen py-24 relative dizme_tm_header" id="home">
            <div class="container">
                <div class="grid lg:grid-cols-2 items-center gap-[25px]">
                    <div class="order-2 lg:order-1">
                        <h1 class="text-[42px] lg:text-[60px] xl:text-[85px] text-center lg:text-left mb-[11px] lg:mb-[18px] leading-[1.3] font-medium font-secondary">南极星</h1>
                        <p class="lg:mb-9 mb-[15px] text-lg lg:text-[19px] xl:text-[28px] text-center lg:text-left font-medium">
                            一个年轻的极客社团
                        </p>
                        <p class="lg:mb-9 mb-[15px] text-lg lg:text-[19px] xl:text-[28px] text-center lg:text-left font-medium">
                            南极星诚挚的祝你找到自己想做的事情！
                        </p>
                        <p class="lg:mb-[42px] text-muted dark:text-white mb-[30px] text-base text-center lg:text-left xl:text-[23px] leading-[1.5] max-w-[640px] mx-auto lg:ml-0">
                            We are trying to be the best club
                        </p>
                        <div class="flex items-center justify-center lg:justify-start gap-[25px]">
                            <a href="#about" class="btn-custom relative">社团简介</a>
                        </div>
                    </div>
                    <div class="order-1 lg:order-2">
                        <div class="relative">
                            <img src="static/picture/avatar.png" class="mx-auto max-w-[160px] lg:max-w-[160px] xl:max-w-[160px]" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Home -->

        <!-- Start Process 
        <section class="md:pt-[190px] pt-[135px] pb-[70px]" id="process">
            <div class="container">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[50px]">
                    <div class="text-center wow fadeInUp" data-wow-duration="1s">
                        <div>
                            <span class="relative inline-block dark:hidden">
                                <img src="static/picture/1.png" class="md:max-w-[125px] max-w-[90px] mx-auto" alt="">
                                <img src="static/picture/target.svg" class="top-1/2 -translate-y-1/2 absolute inset-x-0 w-[45px] md:w-[60px] h-[45px] md:h-[60px] mx-auto" alt="">
                            </span>
                            <span class="relative hidden dark:block">
                                <img src="static/picture/11.png" class="md:max-w-[125px] max-w-[90px] mx-auto" alt="">
                                <img src="static/picture/target-2.svg" class="top-1/2 -translate-y-1/2 absolute inset-x-0 w-[45px] md:w-[60px] h-[45px] md:h-[60px] mx-auto" alt="">
                            </span>
                        </div>
                        <div class="mt-[30px]">
                            <h3 class="text-2xl">Pixel Perfect</h3>
                            <p class="mx-auto text-muted dark:text-darkmuted mt-5 leading-[30px]">Most common methods for designing websites that work well on desktop is responsive and adaptive design.</p>
                        </div>
                    </div>
                    <div class="text-center wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.2s">
                        <div>
                            <span class="relative inline-block dark:hidden">
                                <img src="static/picture/2.png" class="md:max-w-[125px] max-w-[90px] mx-auto" alt="">
                                <img src="static/picture/brush.svg" class="top-1/2 -translate-y-1/2 absolute inset-x-0 w-[45px] md:w-[60px] h-[45px] md:h-[60px] mx-auto" alt="">
                            </span>
                            <span class="relative hidden dark:block">
                                <img src="static/picture/21.png" class="md:max-w-[125px] max-w-[90px] mx-auto" alt="">
                                <img src="static/picture/brush-2.svg" class="top-1/2 -translate-y-1/2 absolute inset-x-0 w-[45px] md:w-[60px] h-[45px] md:h-[60px] mx-auto" alt="">
                            </span>
                        </div>
                        <div class="mt-[30px]">
                            <h3 class="text-2xl">High Quality</h3>
                            <p class="mx-auto text-muted dark:text-darkmuted mt-5 leading-[30px]">Most common methods for designing websites that work well on desktop is responsive and adaptive design.</p>
                        </div>
                    </div>
                    <div class="text-center wow fadeInUp" data-wow-duration="1s" data-wow-delay="0.4s">
                        <div>
                            <span class="relative inline-block dark:hidden">
                                <img src="static/picture/3.png" class="md:max-w-[125px] max-w-[90px] mx-auto" alt="">
                                <img src="static/picture/energy.svg" class="top-1/2 -translate-y-1/2 absolute inset-x-0 w-[45px] md:w-[60px] h-[45px] md:h-[60px] mx-auto" alt="">
                            </span>
                            <span class="relative hidden dark:block">
                                <img src="static/picture/31.png" class="md:max-w-[125px] max-w-[90px] mx-auto" alt="">
                                <img src="static/picture/energy-2.svg" class="top-1/2 -translate-y-1/2 absolute inset-x-0 w-[45px] md:w-[60px] h-[45px] md:h-[60px] mx-auto" alt="">
                            </span>
                        </div>
                        <div class="mt-[30px]">
                            <h3 class="text-2xl">Awesome Idea</h3>
                            <p class="mx-auto text-muted dark:text-darkmuted mt-5 leading-[30px]">Most common methods for designing websites that work well on desktop is responsive and adaptive design.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        End Process -->

        <!-- Start About -->
        <section class="md:pt-[112px] pt-16 relative" id="about">
            <div class="container">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-[90px] items-center">
                    <div class="relative space-y-4 md:space-y-0">
                        <div>
                            <img src="static/picture/1.jpg" class="mx-auto dark:hidden" alt="">
                            <img src="static/picture/2.jpg" class="mx-auto hidden dark:block" alt="">
                        </div>                        
                    </div>
                    <div class="text-center md:text-left">
                        <div class="mb-[25px] lg:max-w-[440px]">
                            <p class="text-custom text-xl md:text-2xl font-medium font-secondary wow fadeInUp" data-wow-duration="1s">Geek planet</p>
                            <h3 class="md:text-[48px] text-[35px] leading-[1.25] mt-1.5 wow fadeInUp" data-wow-duration="1s">南极星</h3>
                        </div>
                        <p class="text-muted dark:text-darkmuted lg:max-w-[485px] leading-[30px] mb-[47px] wow fadeInUp" data-wow-duration="1s">
                            成立于2022年9月3日，是一个医学信息&大数据系下的一个技术社团。
                            喜欢各种应用类比赛(比如服务外包或者中软杯之类的)；
                            对智能家居等硬件动态也很感兴趣；常常会有一些对外宣讲，和朋友们分享知识。
                            欢迎联系我们，您可以在最后找到我们的官方QQ和QQ群，期待和您交朋友！
                        </p>
                        <div class="wow fadeInUp" data-wow-duration="1s">
                            <a href="#contact" class="btn-custom">联系我们</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left-10 top-5 absolute hidden lg:block wow fadeInLeft" data-wow-duration="1s"><img src="static/picture/12.png" alt=""></div>
            <div class="-bottom-[50px] right-0 absolute hidden lg:block wow fadeInRight" data-wow-duration="1s"><img src="static/picture/22.png" alt=""></div>
        </section>
        <!-- End About -->

         <!-- Start Portfolio -->
        <section class="pt-[113px] md:pt-[185px] pb-[88px] md:pb-[165px] relative" id="portfolio">
            <div class="container relative z-10">
                <div class="grid grid-cols-1">
                    <div class="text-center max-w-[680px] mx-auto">
                        <p class="text-custom text-[20px] md:text-2xl font-medium font-secondary">ACT</p>
                        <h3 class="md:text-[48px] text-[35px] leading-[1.25] mb-[23px] mt-1.5">动态</h3>
                        <p class="text-muted dark:text-darkmuted text-lg leading-[30px]">南极星的小伙棒们当下正在忙着服务外包比赛和一个智能家居动态</p>
                    </div>
                </div>
                <div class="grid grid-cols-1">
                    <div class="md:pt-[78px] pt-[53px] pb-[46px] md:pb-[56px]">
                        <ul class="flex items-center gap-4 flex-wrap lg:gap-[50px] justify-center" id="menu-filter">
                            <li class="shrink-0">
                                <a href="#" class="hover:text-custom active text-base duration-300" data-filter="*">全部</a>
                            </li>
                            <li class="shrink-0">
                                <a href="#" class="hover:text-custom text-base duration-300" data-filter=".branding">智能家居</a>
                            </li>
                            <li class="shrink-0">
                                <a href="#" class="hover:text-custom text-base duration-300" data-filter=".design">表格重建</a>
                            </li>
                            <li class="shrink-0">
                                <a href="#" class="hover:text-custom text-base duration-300" data-filter=".development">检测跟踪</a>
                            </li>
                            <li class="shrink-0">
                                <a href="#" class="hover:text-custom text-base duration-300" data-filter=".media">爬虫</a>
                            </li>
                            <li class="shrink-0">
                                <a href="#" class="hover:text-custom text-base duration-300" data-filter=".lifestyle">宣讲</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="dizme_tm_portfolio_titles"></div>
                <div class="md:flex work-filter wow fadeInUp" data-wow-duration="1s">
                    <div class="lg:w-1/3 md:w-1/3 p-3 branding">
                        <div class="rounded-xl overflow-hidden group relative">
                            <div class="main-img-box" data-title="Mockup Shape" data-category="Branding">
                                <a class="img-zoom relative" href="static/picture/11.jpg">
                                    <div class="main group-hover:scale-110 overflow-hidden">
                                        <img src="static/picture/11.jpg" class="object-cover w-full h-full" alt="">
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="lg:w-1/3 md:w-1/3 p-3 design">
                        <div class="rounded-xl overflow-hidden group relative">
                            <div class="main-img-box" data-title="Ave Bottle" data-category="Design">
                                <a class="img-zoom relative" href="static/picture/21.jpg">
                                    <div class="main group-hover:scale-110 overflow-hidden">
                                        <img src="static/picture/4.jpg" class="object-cover w-full h-full" alt="">
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="lg:w-1/3 md:w-1/3 p-3 development">
                        <div class="rounded-xl overflow-hidden group relative">
                            <div class="main-img-box" data-title="Magic Art" data-category="Development">
                                <a class="img-zoom relative" href="static/picture/3.jpg">
                                    <div class="main group-hover:scale-110 overflow-hidden">
                                        <img src="static/picture/21.jpg" class="object-cover w-full h-full" alt="">
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="lg:w-1/3 md:w-1/3 p-3 media">
                        <div class="rounded-xl overflow-hidden group relative">
                            <div class="main-img-box" data-title="Blue Lemon" data-category="Media">
                                <a class="img-zoom relative" href="static/picture/4.jpg">
                                    <div class="main group-hover:scale-110 overflow-hidden">
                                        <img src="static/picture/5.jpg" class="object-cover w-full h-full" alt="">
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="lg:w-1/3 md:w-1/3 p-3 media">
                        <div class="rounded-xl overflow-hidden group relative">
                            <div class="main-img-box" data-title="Art Stone" data-category="Media">
                                <a class="img-zoom relative" href="static/picture/5.jpg">
                                    <div class="main group-hover:scale-110 overflow-hidden">
                                        <img src="static/picture/3.jpg" class="object-cover w-full h-full" alt="">
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="lg:w-1/3 md:w-1/3 p-3 lifestyle">
                        <div class="rounded-xl overflow-hidden group relative">
                            <div class="main-img-box" data-title="Global Evolution" data-category="Lifestyle">
                                <a class="img-zoom relative" href="static/picture/6.jpg">
                                    <div class="main group-hover:scale-110 overflow-hidden">
                                        <img src="static/picture/6.jpg" class="object-cover w-full h-full" alt="">
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left-[50px] top-[150px] absolute hidden lg:block wow zoomIn" data-wow-duration="1s"><img src="static/picture/13.png" alt=""></div>
            <div class="right-[10px] bottom-[51px] absolute hidden lg:block wow fadeInRight" data-wow-duration="1s"><img src="static/picture/23.png" alt=""></div>
        </section>
        <!-- End Portfolio -->

        <!-- Start Skills
        <section>
            <div class="container relative z-10">
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-[200px] items-center">
                    <div>
                        <div class="mb-[23px] wow fadeInUp" data-wow-duration="1s">
                            <p class="text-custom text-[20px] md:text-2xl font-medium font-secondary">Design is Life</p>
                            <h3 class="md:text-[48px] text-[35px] leading-[1.25] mt-1.5">I Develop Skills Regularly to Keep Me Update</h3>
                        </div>
                        <p class="text-muted dark:text-darkmuted lg:max-w-[485px] leading-[30px] wow fadeInUp" data-wow-duration="1s">Most common methods for designing websites that work well on desktop is responsive and adaptive design</p>
                        <div class="pt-[30px] space-y-[22px] wow fadeInUp" data-wow-duration="1s">
                            <div class="w-full mb-[22px] relative" data-value="85" data-color="#f75023">
                                <div class="mb-[9px] block"><span class="text-lg font-medium font-secondary inline-block">Illustrator</span><span class="absolute right-[15%] text-custom">85%</span></div>
                                <div class="w-full bg-[#e7e5f1] rounded-full h-2">
                                    <div class="bg-custom h-2 rounded-full" style="width: 85%;"></div>
                                </div>
                            </div>
                            <div class="w-full mb-[22px] relative" data-value="95" data-color="#f75023">
                                <div class="mb-[9px] block"><span class="text-lg font-medium font-secondary inline-block">Photoshop</span><span class="absolute right-[5%] text-custom">95%</span></div>
                                <div class="w-full bg-[#e7e5f1] rounded-full h-2">
                                    <div class="bg-[#1cbe59] h-2 rounded-full" style="width: 95%;"></div>
                                </div>
                            </div>
                            <div class="w-full mb-[22px] relative" data-value="75" data-color="#f75023">
                                <div class="mb-[9px] block"><span class="text-lg font-medium font-secondary inline-block">Figma</span><span class="absolute right-[25%] text-custom">75%</span></div>
                                <div class="w-full bg-[#e7e5f1] rounded-full h-2">
                                    <div class="bg-[#8067f0] h-2 rounded-full" style="width: 75%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="relative">
                        <div>
                            <img src="static/picture/12.jpg" class="max-h-[800px] mx-auto dark:hidden" alt="">
                            <img src="static/picture/22.jpg" class="max-h-[800px] mx-auto hidden dark:block" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        End Skills -->

        <!-- Start Services -->
        <section class="md:pt-[178px] pt-[120px] pb-[98px] md:pb-[160px] relative" id="service">
            <div class="container relative z-10">
                <div class="grid grid-cols-1">
                    <div class="text-center max-w-[680px] mx-auto">
                        <p class="text-custom text-[20px] md:text-2xl font-medium font-secondary">Members</p>
                        <h3 class="md:text-[48px] text-[35px] leading-[1.25] mb-[23px] mt-1.5">南极星的小伙伴</h3>
                        <p class="text-muted dark:text-darkmuted text-lg leading-[30px]">南极星很荣幸认识各位，南极星因为你们变得更好！</p>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 pt-[86px] gap-[25px]">
                    <div class="cursor-pointer wow fadeInLeft" data-wow-duration="1s">
                        <div onclick="toggleModal('modal-id')" class="shadow-[18px_0px_87px_rgba(10,15,17,0.07)] bg-white dark:bg-semilight p-8 lg:p-[65px] rounded-xl space-y-6 lg:space-y-0 lg:flex items-start gap-12 tilt-effect">
                            <div class="shrink-0 relative inline-block">
                                <img class="top-1/2 -translate-y-1/2 absolute inset-x-0 w-[90px] h-[90px] mx-auto" src="static/picture/zhutao.png" alt="">
                                <img src="static/picture/14.png" class="dark:hidden" alt="">
                                <img src="static/picture/15.png" class="dark:block hidden" alt="">
                            </div>
                            <div>
                                <h3 class="text-[30px] mb-4">朱涛</h3>
                                <p class="text-[21px] mb-5 font-medium font-secondary text-dark dark:text-white">
                                    <span>指导老师</span>
                                </p>
                                <p class="text-muted dark:text-darkmuted text-lg leading-[30px]">
                                    这是南极星的指导老师，也是数据班的班主任，很和蔼很厉害的一位老师~
                                </p>
                            </div>
                        </div>                        
                    </div>
                    <div class="cursor-pointer wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.2s">
                        <div onclick="toggleModaltwo('modal-id-two')" class="shadow-[18px_0px_87px_rgba(10,15,17,0.07)] bg-white dark:bg-semilight p-8 lg:p-[65px] rounded-xl space-y-6 lg:space-y-0 lg:flex items-start gap-12 tilt-effect">
                            <div class="shrink-0 relative inline-block">
                                <img class="top-1/2 -translate-y-1/2 absolute inset-x-0 w-[90px] h-[90px] mx-auto" src="static/picture/luolingyun.png" alt="">
                                <img src="static/picture/24.png" class="dark:hidden" alt="">
                                <img src="static/picture/25.png" class="dark:block hidden" alt="">
                            </div>
                            <div>
                                <h3 class="text-[30px] mb-4">罗凌云</h3>
                                <p class="text-[21px] mb-5 font-medium font-secondary text-dark dark:text-white">
                                    <span>指导老师</span>
                                </p>
                                <p class="text-muted dark:text-darkmuted text-lg leading-[30px]">
                                    南极星的指导老师，系主任，她的目光很让人安心
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="cursor-pointer wow fadeInLeft" data-wow-duration="1s">
                        <div onclick="toggleModalthree('modal-id-three')" class="shadow-[18px_0px_87px_rgba(10,15,17,0.07)] bg-white dark:bg-semilight p-8 lg:p-[65px] rounded-xl space-y-6 lg:space-y-0 lg:flex items-start gap-12 tilt-effect">
                            <div class="shrink-0 relative inline-block">
                                <img class="top-1/2 -translate-y-1/2 absolute inset-x-0 w-[70px] h-[90px] mx-auto" src="static/picture/qiuqi.jpeg" alt="">
                                <img src="static/picture/32.png" class="dark:hidden" alt="">
                                <img src="static/picture/33.png" class="dark:block hidden" alt="">
                            </div>
                            <div>
                                <h3 class="text-[30px] mb-4">邱祺</h3>
                                <p class="text-[21px] mb-5 font-medium font-secondary text-dark dark:text-white">
                                    <span>研究生</span>
                                </p>
                                <p class="text-muted dark:text-darkmuted text-lg leading-[30px]">
                                    负责南极星的一些日常事务，如果您想了解南极星，欢迎联系他(email: qiuqialpha.gmail.com)
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="cursor-pointer wow fadeInRight" data-wow-duration="1s" data-wow-delay="0.2s">
                        <div onclick="toggleModalfour('modal-id-four')" class="shadow-[18px_0px_87px_rgba(10,15,17,0.07)] bg-white dark:bg-semilight p-8 lg:p-[65px] rounded-xl space-y-6 lg:space-y-0 lg:flex items-start gap-12 tilt-effect">
                            <div class="shrink-0 relative inline-block">
                                <img class="top-1/2 -translate-y-1/2 absolute inset-x-0 w-[90px] h-[100px] mx-auto" src="static/picture/chenyingjie.jpg" alt="">
                                <img src="static/picture/4.png" class="dark:hidden" alt="">
                                <img src="static/picture/41.png" class="dark:block hidden" alt="">
                            </div>
                            <div>
                                <h3 class="text-[30px] mb-4">陈英杰</h3>
                                <p class="text-[21px] mb-5 font-medium font-secondary text-dark dark:text-white">
                                    <span>研究生</span>
                                </p>
                                <p class="text-muted dark:text-darkmuted text-lg leading-[30px]">
                                    南极星负责摸鱼的学姐，对ChatGPT很感兴趣，但ChatGPT拒绝了她的告白。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top-[300px] left-0 absolute hidden lg:block wow fadeInLeft" data-wow-duration="1s"><img src="static/picture/5.png" alt=""></div>
            <div class="top-0 right-0 absolute hidden lg:block wow zoomIn" data-wow-duration="1s"><img src="static/picture/6.png" alt=""></div>
        </section>
        <!-- End Services -->

        <!-- Start Modal -->
        <section>
            <div>
                <div class="hidden overflow-x-hidden fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center" id="modal-id">
                    <div class="relative w-full my-10 mx-auto max-w-[968px] h-[calc(100vh-80px)] py-20">
                        <div class="rounded relative flex flex-col w-full pt-5 overflow-y-auto p-[50px] bg-white dark:bg-[#34353a] outline-none focus:outline-none h-full scrollbar-thumb-dark/25 scrollbar-track-dark/10 scrollbar-thin">
                            <div class="flex items-center justify-between pb-5">
                                <h3 class="text-2xl font-semibold">
                                    Services Details
                                </h3>
                                <button class="ml-auto bg-transparent border-0 dark:text-white text-dark" onclick="toggleModal('modal-id')">
                                    <span class="bg-transparent stroke-dark block">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7 dark:stroke-white stroke-dark">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                                          </svg>                                  
                                    </span>
                                </button>
                            </div>
                            <div>
                                <img src="static/picture/13.jpg" class="h-[350px] object-cover w-full rounded-xl" alt="">
                                <h3 class="mt-[37px] text-[30px] font-medium ">Creative Design</h3>
                                <p class="text-[21px] font-secondary font-medium mt-1">Starts from <span class="text-custom text-2xl">$99</span></p>
                                <div class="mt-[23px] space-y-5">
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hidden fixed inset-0 z-40 bg-dark/90" id="modal-id-backdrop"></div>
            </div>
            <div>
                <div class="hidden overflow-x-hidden fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center" id="modal-id-two">
                    <div class="relative w-full my-10 mx-auto max-w-[968px] h-[calc(100vh-80px)] py-20">
                        <div class="rounded relative flex flex-col w-full pt-5 overflow-y-auto p-[50px] bg-white dark:bg-[#34353a] outline-none focus:outline-none h-full scrollbar-thumb-dark/25 scrollbar-track-dark/10 scrollbar-thin">
                            <div class="flex items-center justify-between pb-5">
                                <h3 class="text-2xl font-semibold">
                                    Services Details
                                </h3>
                                <button class="ml-auto bg-transparent border-0 text-dark" onclick="toggleModal('modal-id-two')">
                                    <span class="bg-transparent stroke-dark block">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7 dark:stroke-white stroke-dark">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                                          </svg>                                  
                                    </span>
                                </button>
                            </div>
                            <div>
                                <img src="static/picture/23.jpg" class="h-[350px] object-cover w-full rounded-xl" alt="">
                                <h3 class="mt-[37px] text-[30px] font-medium ">Graphic Design</h3>
                                <p class="text-[21px] font-secondary font-medium mt-1">Starts from <span class="text-custom text-2xl">$199</span></p>
                                <div class="mt-[23px] space-y-5">
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hidden fixed inset-0 z-40 bg-dark/90" id="modal-id-two-backdrop"></div>
            </div>
            <div>
                <div class="hidden overflow-x-hidden fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center" id="modal-id-three">
                    <div class="relative w-full my-10 mx-auto max-w-[968px] h-[calc(100vh-80px)] py-20">
                        <div class="rounded relative flex flex-col w-full pt-5 overflow-y-auto p-[50px] bg-white dark:bg-[#34353a] outline-none focus:outline-none h-full scrollbar-thumb-dark/25 scrollbar-track-dark/10 scrollbar-thin">
                            <div class="flex items-center justify-between pb-5">
                                <h3 class="text-2xl font-semibold">
                                    Services Details
                                </h3>
                                <button class="ml-auto bg-transparent border-0 text-dark" onclick="toggleModal('modal-id-three')">
                                    <span class="bg-transparent stroke-dark block">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7 dark:stroke-white stroke-dark">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                                          </svg>                                  
                                    </span>
                                </button>
                            </div>
                            <div>
                                <img src="static/picture/31.jpg" class="h-[350px] object-cover w-full rounded-xl" alt="">
                                <h3 class="mt-[37px] text-[30px] font-medium ">UI/UX Design</h3>
                                <p class="text-[21px] font-secondary font-medium mt-1">Starts from <span class="text-custom text-2xl">$299</span></p>
                                <div class="mt-[23px] space-y-5">
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hidden fixed inset-0 z-40 bg-dark/90" id="modal-id-three-backdrop"></div>
            </div>
            <div>
                <div class="hidden overflow-x-hidden fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center" id="modal-id-four">
                    <div class="relative w-full my-10 mx-auto max-w-[968px] h-[calc(100vh-80px)] py-20">
                        <div class="rounded relative flex flex-col w-full pt-5 overflow-y-auto p-[50px] bg-white dark:bg-[#34353a] outline-none focus:outline-none h-full scrollbar-thumb-dark/25 scrollbar-track-dark/10 scrollbar-thin">
                            <div class="flex items-center justify-between pb-5">
                                <h3 class="text-2xl font-semibold">
                                    Services Details
                                </h3>
                                <button class="ml-auto bg-transparent border-0 text-dark" onclick="toggleModal('modal-id-four')">
                                    <span class="bg-transparent stroke-dark block">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7 dark:stroke-white stroke-dark">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                                          </svg>                                  
                                    </span>
                                </button>
                            </div>
                            <div>
                                <img src="static/picture/41.jpg" class="h-[350px] object-cover w-full rounded-xl" alt="">
                                <h3 class="mt-[37px] text-[30px] font-medium ">Web Design</h3>
                                <p class="text-[21px] font-secondary font-medium mt-1">Starts from <span class="text-custom text-2xl">$399</span></p>
                                <div class="mt-[23px] space-y-5">
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hidden fixed inset-0 z-40 bg-dark/90" id="modal-id-four-backdrop"></div>
            </div>
        </section>
        <!-- End Modal -->

        <!-- Start Testimonial
        <section class="relative pb-[127px] md:pb-[187px]">
            <div class="px-4 lg:px-0 relative z-10">
                <div class="grid grid-cols-1">
                    <div class="text-center max-w-[680px] mx-auto">
                        <p class="text-custom text-[20px] md:text-2xl font-medium font-secondary">Testimonials</p>
                        <h3 class="md:text-[48px] text-[35px] leading-[1.25] mb-[23px] mt-1.5">What My Clients Say</h3>
                        <p class="text-muted dark:text-darkmuted text-lg leading-[30px]">Most common methods for designing websites that work well on desktop is responsive and adaptive design</p>
                    </div>
                </div>
                <div class="grid grid-cols-1 mt-20 relative bg-cover bg-top dark:bg-[url('../img/testimonials/bg-client-dark.png')] bg-[url('../img/testimonials/bg-client.png')]">
                    <div id="owl-demo" class="owl-carousel">
                        <div class="text-center max-w-[900px] mx-auto">
                            <div class="mb-[35px]">
                                <img class="!w-[65px] mx-auto" src="static/picture/quote.svg" alt="">
                            </div>
                            <div>
                                <p class="md:text-[30px] text-xl text-muted dark:text-darkmuted italic leading-[1.6]">
                                    I rarely like to write reviews, but the itemstore team truly deserve a standing ovation for their customer support, customisation and most importantly, friendliness and professionalism. Many thanks once
                                    again for everything and hope that I get to deal with you again in the near future.
                                </p>
                            </div>
                            <div class="flex items-center gap-[25px] mt-[51px] justify-center">
                                <img src="static/picture/42.jpg" class="!w-[60px] rounded-full" alt="">
                                <div class="text-start">
                                    <h5 class="font-secondary text-2xl font-medium">Mike Anderson</h5>
                                    <p class="text-muted dark:text-darkmuted text-base leading-7">Vivaco Studio</p>
                                </div>
                            </div>
                        </div>
                        <div class="text-center max-w-[900px] mx-auto">
                            <div class="mb-[35px]">
                                <img class="!w-[65px] mx-auto" src="static/picture/quote.svg" alt="">
                            </div>
                            <div>
                                <p class="md:text-[30px] text-xl text-muted dark:text-darkmuted italic leading-[1.6]">
                                    I rarely like to write reviews, but the itemstore team truly deserve a standing ovation for their customer support, customisation and most importantly, friendliness and professionalism. Many thanks once
                                    again for everything and hope that I get to deal with you again in the near future.
                                </p>
                            </div>
                            <div class="flex items-center gap-[25px] mt-[51px] justify-center">
                                <img src="static/picture/42.jpg" class="!w-[60px] rounded-full" alt="">
                                <div class="text-start">
                                    <h5 class="font-secondary text-2xl font-medium">Mike Anderson</h5>
                                    <p class="text-muted dark:text-darkmuted text-base leading-7">Vivaco Studio</p>
                                </div>
                            </div>
                        </div>
                        <div class="text-center max-w-[900px] mx-auto">
                            <div class="mb-[35px]">
                                <img class="!w-[65px] mx-auto" src="static/picture/quote.svg" alt="">
                            </div>
                            <div>
                                <p class="md:text-[30px] text-xl text-muted dark:text-darkmuted italic leading-[1.6]">
                                    I rarely like to write reviews, but the itemstore team truly deserve a standing ovation for their customer support, customisation and most importantly, friendliness and professionalism. Many thanks once
                                    again for everything and hope that I get to deal with you again in the near future.
                                </p>
                            </div>
                            <div class="flex items-center gap-[25px] mt-[51px] justify-center">
                                <img src="static/picture/42.jpg" class="!w-[60px] rounded-full" alt="">
                                <div class="text-start">
                                    <h5 class="font-secondary text-2xl font-medium">Mike Anderson</h5>
                                    <p class="text-muted dark:text-darkmuted text-base leading-7">Vivaco Studio</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="absolute right-5 -top-[120px] hidden lg:block wow fadeInRight" data-wow-duration="1s"><img src="static/picture/16.png" alt=""></div>
        </section>
        End Testimonial -->

        <!-- Start Partners
        <section class="relative pb-8">
            <div class="container relative z-10">
                <div class="grid grid-cols-2 md:grid-cols-4 border-2 border-[#eee] dark:border-[#555] rounded-[10px]">
                    <div class="border-b-2 border-[#eee] dark:border-[#555] wow fadeIn" data-wow-duration="1s">
                        <a href="#" class="opacity-50 hover:opacity-100 cursor-pointer duration-300 h-[180px] flex items-center">
                            <img src="static/picture/17.png" class="mx-auto max-w-[88%] dark:hidden" alt="">
                            <img src="static/picture/18.png" class="mx-auto max-w-[88%] hidden dark:block" alt="">
                        </a>
                    </div>
                    <div class="border-l-2 border-b-2 border-[#eee] dark:border-[#555] wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
                        <a href="#" class="opacity-50 hover:opacity-100 cursor-pointer duration-300 h-[180px] flex items-center">
                            <img src="static/picture/26.png" class="mx-auto max-w-[88%] dark:hidden" alt="">
                            <img src="static/picture/27.png" class="mx-auto max-w-[88%] hidden dark:block" alt="">
                        </a>
                    </div>
                    <div class="md:border-l-2 border-b-2 border-[#eee] dark:border-[#555] wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s">
                        <a href="#" class="opacity-50 hover:opacity-100 cursor-pointer duration-300 h-[180px] flex items-center">
                            <img src="static/picture/34.png" class="mx-auto max-w-[88%] dark:hidden" alt="">
                            <img src="static/picture/35.png" class="mx-auto max-w-[88%] hidden dark:block" alt="">
                        </a>
                    </div>
                    <div class="border-l-2 border-b-2 border-[#eee] dark:border-[#555] wow fadeIn" data-wow-duration="1s" data-wow-delay="0.6s">
                        <a href="#" class="opacity-50 hover:opacity-100 cursor-pointer duration-300 h-[180px] flex items-center">
                            <img src="static/picture/42.png" class="mx-auto max-w-[88%] dark:hidden" alt="">
                            <img src="static/picture/43.png" class="mx-auto max-w-[88%] hidden dark:block" alt="">
                        </a>
                    </div>
                    <div class="border-[#eee] dark:border-[#555] border-b-2 md:border-b-0 wow fadeIn" data-wow-duration="1s">
                        <a href="#" class="opacity-50 hover:opacity-100 cursor-pointer duration-300 h-[180px] flex items-center">
                            <img src="static/picture/51.png" class="mx-auto max-w-[88%] dark:hidden" alt="">
                            <img src="static/picture/52.png" class="mx-auto max-w-[88%] hidden dark:block" alt="">
                        </a>
                    </div>
                    <div class="border-l-2 border-[#eee] dark:border-[#555] border-b md:border-b-0 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s">
                        <a href="#" class="opacity-50 hover:opacity-100 cursor-pointer duration-300 h-[180px] flex items-center">
                            <img src="static/picture/61.png" class="mx-auto max-w-[88%] dark:hidden" alt="">
                            <img src="static/picture/62.png" class="mx-auto max-w-[88%] hidden dark:block" alt="">
                        </a>
                    </div>
                    <div class="md:border-l-2 border-[#eee] dark:border-[#555] wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s">
                        <a href="#" class="opacity-50 hover:opacity-100 cursor-pointer duration-300 h-[180px] flex items-center">
                            <img src="static/picture/7.png" class="mx-auto max-w-[88%] dark:hidden" alt="">
                            <img src="static/picture/71.png" class="mx-auto max-w-[88%] hidden dark:block" alt="">
                        </a>
                    </div>
                    <div class="border-l-2 border-[#eee] dark:border-[#555] wow fadeIn" data-wow-duration="1s" data-wow-delay="0.6s">
                        <a href="#" class="opacity-50 hover:opacity-100 cursor-pointer duration-300 h-[180px] flex items-center">
                            <img src="static/picture/8.png" class="mx-auto max-w-[88%] dark:hidden" alt="">
                            <img src="static/picture/81.png" class="mx-auto max-w-[88%] hidden dark:block" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="-top-[170px] left-0 absolute hidden lg:block" data-wow-duration="1s"><img src="static/picture/19.png" alt=""></div>
        </section>
        End Partners -->

        <!-- Start Blog -->
        <section class="md:pt-[185px] pt-[120px] pb-[100px] md:pb-[160px] relative" id="blog">
            <div class="container relative z-10">
                <div class="grid grid-cols-1">
                    <div class="text-center max-w-[680px] mx-auto">
                        <p class="text-custom text-[20px] md:text-2xl font-medium font-secondary">Blog</p>
                        <h3 class="md:text-[48px] text-[35px] leading-[1.25] mb-[23px] mt-1.5">博客</h3>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 pt-[65px] gap-[25px]">
                    <div class="wow fadeInUp cursor-pointer" data-wow-duration="1s">
                        <div onclick="toggleModal('modal-id-blog')">
                            <div class="overflow-hidden group rounded-xl relative">
                                <img src="static/picture/14.jpg" class="scale-100 rounded-xl object-cover w-full h-full min-h-[303px] duration-300 group-hover:scale-110" alt="">
                                <div class="bg-[#1cbe59] top-[18px] right-[18px] z-20 inline-block absolute rounded-xl text-center py-3 px-5">
                                    <h3 class="text-2xl text-white leading-[1.2]">23</h3>
                                    <span class="text-white text-sm">Dec</span>
                                </div>
                            </div>
                            <div class="mt-5">
                                <p class="text-custom font-medium font-secondary"><a href="#">windows 子系统教程</a></p>
                                <h4 class="mt-1 leading-[1.4] text-[21px]"><a href="#" class="hover:text-custom">关于在windows下运行ubuntu这件事</a></h4>
                            </div>
                        </div>
                    </div>
                    <div class="wow fadeInUp cursor-pointer" data-wow-duration="1s" data-wow-delay="0.2s">
                        <div onclick="toggleModal('modal-id-blog-two')">
                            <div class="overflow-hidden group rounded-xl relative">
                                <img src="static/picture/24.jpg" class="scale-100 rounded-xl object-cover w-full h-full min-h-[303px] duration-300 group-hover:scale-110" alt="">
                                <div class="bg-[#1cbe59] top-[18px] right-[18px] z-20 inline-block absolute rounded-xl text-center py-3 px-5">
                                    <h3 class="text-2xl text-white leading-[1.2]">23</h3>
                                    <span class="text-white text-sm">Dec</span>
                                </div>
                            </div>
                            <div class="mt-5">
                                <p class="text-custom font-medium font-secondary"><a href="#">OpenCV入门</a></p>
                                <h4 class="mt-1 leading-[1.4] text-[21px]"><a href="#" class="hover:text-custom">photoshop是什么东西，程序员都写代码P痘痘的</a></h4>
                            </div>
                        </div>
                    </div>
                    <div class="wow fadeInUp cursor-pointer" data-wow-duration="1s" data-wow-delay="0.4s">
                        <div onclick="toggleModal('modal-id-blog-three')">
                            <div class="overflow-hidden group rounded-xl relative">
                                <img src="static/picture/32.jpg" class="scale-100 rounded-xl object-cover w-full h-full min-h-[303px] duration-300 group-hover:scale-110" alt="">
                                <div class="bg-[#1cbe59] top-[18px] right-[18px] z-20 inline-block absolute rounded-xl text-center py-3 px-5">
                                    <h3 class="text-2xl text-white leading-[1.2]">23</h3>
                                    <span class="text-white text-sm">Dec</span>
                                </div>
                            </div>
                            <div class="mt-5">
                                <p class="text-custom font-medium font-secondary"><a href="#">Gitee基本操作</a></p>
                                <h4 class="mt-1 leading-[1.4] text-[21px]"><a href="#" class="hover:text-custom">原来同步代码不是靠QQ聊天框！</a></h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="top-[250px] left-[115px] absolute hidden lg:block wow zoomIn" data-wow-duration="1s"><img src="static/picture/110.png" alt=""></div>
            <div class="top-0 right-0 absolute hidden lg:block wow zoomIn" data-wow-duration="1s"><img src="static/picture/28.png" alt=""></div>
        </section>
        <!-- End Blog -->

        <!-- Start Blog Modal -->
        <section>
            <div>
                <div class="hidden overflow-x-hidden fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center" id="modal-id-blog">
                    <div class="relative w-full my-10 mx-auto max-w-[968px] h-[calc(100vh-80px)] py-20">
                        <div class="rounded relative flex flex-col w-full pt-5 overflow-y-auto p-[50px] bg-white dark:bg-[#34353a] outline-none focus:outline-none h-full scrollbar-thumb-dark/25 scrollbar-track-dark/10 scrollbar-thin">
                            <div class="flex items-center justify-between pb-5">
                                <h3 class="text-2xl font-semibold">
                                    Blog Details
                                </h3>
                                <button class="ml-auto bg-transparent border-0 text-dark" onclick="toggleModal('modal-id-blog')">
                                    <span class="bg-transparent stroke-dark block">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7 dark:stroke-white stroke-dark">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                                          </svg>                                  
                                    </span>
                                </button>
                            </div>
                            <div>
                                <img src="static/picture/14.jpg" class="h-[350px] object-cover w-full rounded-xl" alt="">
                                <h3 class="mt-[37px] text-[30px] font-medium ">Jim Morisson Says when the musics over turn off the light</h3>
                                <p class="font-secondary text-muted dark:text-darkmuted mt-1">Social Media</p>
                                <div class="mt-[23px] space-y-5">
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hidden fixed inset-0 z-40 bg-dark/90" id="modal-id-blog-backdrop"></div>
            </div>
            <div>
                <div class="hidden overflow-x-hidden fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center" id="modal-id-blog-two">
                    <div class="relative w-full my-10 mx-auto max-w-[968px] h-[calc(100vh-80px)] py-20">
                        <div class="rounded relative flex flex-col w-full pt-5 overflow-y-auto p-[50px] bg-white dark:bg-[#34353a] outline-none focus:outline-none h-full scrollbar-thumb-dark/25 scrollbar-track-dark/10 scrollbar-thin">
                            <div class="flex items-center justify-between pb-5">
                                <h3 class="text-2xl font-semibold">
                                    Blog Details
                                </h3>
                                <button class="ml-auto bg-transparent border-0 text-dark" onclick="toggleModal('modal-id-blog-two')">
                                    <span class="bg-transparent stroke-dark block">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7 dark:stroke-white stroke-dark">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                                          </svg>                                  
                                    </span>
                                </button>
                            </div>
                            <div>
                                <img src="static/picture/24.jpg" class="h-[350px] object-cover w-full rounded-xl" alt="">
                                <h3 class="mt-[37px] text-[30px] font-medium ">How to be appreciated for your hard work as a developer</h3>
                                <p class="font-secondary text-muted dark:text-darkmuted mt-1">Branding</p>
                                <div class="mt-[23px] space-y-5">
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hidden fixed inset-0 z-40 bg-dark/90" id="modal-id-blog-two-backdrop"></div>
            </div>
            <div>
                <div class="hidden overflow-x-hidden fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center" id="modal-id-blog-three">
                    <div class="relative w-full my-10 mx-auto max-w-[968px] h-[calc(100vh-80px)] py-20">
                        <div class="rounded relative flex flex-col w-full pt-5 overflow-y-auto p-[50px] bg-white dark:bg-[#34353a] outline-none focus:outline-none h-full scrollbar-thumb-dark/25 scrollbar-track-dark/10 scrollbar-thin">
                            <div class="flex items-center justify-between pb-5">
                                <h3 class="text-2xl font-semibold">
                                    Blog Details
                                </h3>
                                <button class="ml-auto bg-transparent border-0 text-dark" onclick="toggleModal('modal-id-blog-three')">
                                    <span class="bg-transparent stroke-dark block">
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-7 h-7 dark:stroke-white stroke-dark">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                                          </svg>                                  
                                    </span>
                                </button>
                            </div>
                            <div>
                                <img src="static/picture/32.jpg" class="h-[350px] object-cover w-full rounded-xl" alt="">
                                <h3 class="mt-[37px] text-[30px] font-medium ">How designers and developers can collaborate better</h3>
                                <p class="font-secondary text-muted dark:text-darkmuted mt-1">Social Media</p>
                                <div class="mt-[23px] space-y-5">
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                    <p class="text-muted dark:text-darkmuted">Dizme is a leading web design agency with an award-winning design team that creates innovative, effective websites that capture your brand, improve your conversion rates, and maximize your revenue to help grow your business and achieve your goals.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hidden fixed inset-0 z-40 bg-dark/90" id="modal-id-blog-three-backdrop"></div>
            </div>
        </section>
        <!-- End Blog Modal -->

        <!-- Start Subcribe
        <section>
            <div class="container">
                <div class="bg-[url('../img/subscribe/dots.jpg')] relative rounded-xl py-[90px] px-7 md:px-[86px]">
                    <div class="bg-[#8067f0]/90 absolute inset-0 rounded-xl"></div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 relative gap-y-10 lg:gap-y-0 items-center gap-4">
                        <div class="text-white wow fadeInLeft" data-wow-duration="1s">
                            <p class="md:text-[21px] text-[19px] font-medium font-secondary">Subscribe Now</p>
                            <h4 class="mt-4 text-[35px] md:text-5xl">Get My Newsletter</h4>
                            <p class="mt-4 text-lg">Get latest news, updates, tips and trics in your inbox</p>
                        </div>
                        <div>
                            <div class="relative wow fadeInRight" data-wow-duration="1s">
                                <input type="email" class="form-input custom-mail" placeholder="Your email here">
                                <input type="submit" value="Send Now" class="sub-btn">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        End Subcribe -->

        <!-- Start Contact -->
        <section class="md:pt-[190px] pt-[123px] pb-[120px] md:pb-[200px] relative" id="contact">
            <div class="container">
                <div class="grid grid-cols-1">
                    <div class="text-center max-w-[680px] mx-auto">
                        <p class="text-custom text-[20px] md:text-2xl font-medium font-secondary">Contact Me</p>
                        <h3 class="md:text-[48px] text-[35px] leading-[1.25] mb-[23px] mt-1.5">联系我们</h3>
                        <p class="text-muted dark:text-darkmuted text-lg leading-[30px]">您可以通过下面方式联系我们</p>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 mt-20 gap-[25px]">
                    <div class="space-y-[15px] wow fadeInLeft" data-wow-duration="1s">
                        <div class="flex items-center gap-[25px]">
                            <div class="shrink-0 h-[88px] w-[88px] leading-[88px] rounded-full bg-[#fedfd7] inline-block text-center text-2xl">
                                <i class="icon-location text-custom"></i>
                            </div>
                            <div>
                                <h5 class="md:text-[30px] text-[25px]">地址</h5>
                                <p class="text-lg mt-1.5 text-muted dark:text-darkmuted leading-8">南华大学雨母校区，计算机楼，105号教室</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-[25px]">
                            <div class="shrink-0 h-[88px] w-[88px] leading-[88px] rounded-full bg-[#ddf5e6] inline-block text-center text-2xl">
                                <i class="icon-mail-1 text-[#1cbe59]"></i>
                            </div>
                            <div>
                                <h5 class="md:text-[30px] text-[25px]">邮箱</h5>
                                <p class="text-lg mt-1.5 text-muted dark:text-darkmuted leading-8">geek.planet.usc@proton.me</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-[25px]">
                            <div class="shrink-0 h-[88px] w-[88px] leading-[88px] rounded-full bg-[#ece8fd] inline-block text-center text-2xl">
                                <i class="icon-phone text-[#8067f0]"></i>
                            </div>
                            <div>
                                <h5 class="md:text-[30px] text-[25px]">电话</h5>
                                <p class="text-lg mt-1.5 text-muted dark:text-darkmuted leading-8">131 4233 8890</p>
                            </div>
                        </div>
                    </div>
                    <div class="right wow fadeInRight" data-wow-duration="1s">
                        <img src="static/picture/njxqun.png" alt=""> 
                    </div>
                </div>
            </div>
            <div class="top-[100px] absolute left-0 hidden lg:block wow fadeInLeft" data-wow-duration="1s"><img src="static/picture/111.png" alt=""></div>
            <div class="absolute bottom-[100px] right-[150px] hidden lg:block wow fadeInRight" data-wow-duration="1s"><img src="static/picture/29.png" alt=""></div>
        </section>
        <!-- End Contact -->

        <!-- Start Map -->
        <section class="relative pb-[120px] md:pb-[200px]">
            <div class="container">
                <div class="grid grid-cols-1">
                    <div>
                        <div class="mapouter">
                            <div class="gmap_canvas rounded-xl">
                                <iframe width="100%" height="375" id="gmap_canvas" src="javascript:;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
                                <a href="javascript:;"></a><br>
                                <style>
                                    .mapouter {
                                        position: relative;
                                        text-align: right;
                                        height: 375px;
                                        width: 100%;
                                    }
                                </style>
                                <a href="javascript:;">how to add google map</a>
                                <style>
                                    .gmap_canvas {
                                        overflow: hidden;
                                        background: none !important;
                                        height: 375px;
                                        width: 100%;
                                    }
                                </style>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Map -->

        <!-- Start Footer
        <section class="py-[60px] relative bg-[#f2f5fb] dark:bg-[#3f4453]">
            <div class="container">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5 items-center">
                    <div>
                        <p class="text-muted dark:text-darkmuted text-base text-center md:text-left">Copyright &copy; 2023.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                    </div>
                    
                </div>
            </div>
        </section>
        End Footer -->

        <!-- Start Cursor -->
        <div class="mouse-cursor cursor-outer"></div>
        <div class="mouse-cursor cursor-inner"></div>
        <!-- End Cursor -->

        <!-- Start Totop -->
        <div class="fixed h-[100px] w-px bottom-[25px] -right-[25px] bg-dark/10 z-10 duration-300 progressbar">
            <a href="#" class="no-underline text-dark"><span class="absolute bottom-[100px] left-0 text-[13px] text">To Top</span></a>
            <span class="line"></span>
        </div>
        <!-- End Totop -->

        <!-- All Javascript -->
        <script data-cfasync="false" src="static/js/email-decode.min.js"></script><script src="static/js/jquery-3.6.2.min.js"></script>

        <!-- Work Filter -->
        <script src="static/js/isotope.js"></script>

        <!-- Magnific Popup Js -->
        <script src="static/js/jquery.magnific-popup.min.js"></script>

        <script defer="" src="static/js/cdn.min.js"></script>

        <!-- Owl Carousel -->
        <script src="static/js/owl.carousel.min.js"></script>
        <script src="static/js/tilt.jquery.js"></script>

        <!-- Wow js -->
        <script src="static/js/wow.min.js"></script>

        <!-- Custom Js -->
        <script src="static/js/custom.js"></script>
    </body>
</html>
